<template>
  <div style="height: 100vh;">
    <!-- 顶部导航栏 -->
    <div class="top-nav" style="height: 100px; background-color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
      <div class="logo" style="display: flex; align-items: center;">
        <img src="../assets/logo.png" alt="Logo" style="height: 100px;width: auto;background-color: white;"@click="navigatorIndex">
      </div>
      <el-menu
          mode="horizontal"
          background-color="white"
          text-color="black"
          active-text-color="#C0C0C0"
          router
          :collapse-transition="false"
          :ellipsis="false"
          style="height: 100px;width:300px; justify-content: center;"
      >
        <el-menu-item index="/index" style="font-size: 18px;margin: 0px 30px;">首页</el-menu-item>
        <el-menu-item index="/order" style="font-size: 18px;margin: 0px 30px;">订单</el-menu-item>
        <el-menu-item index="/user/profile" style="font-size: 18px;margin: 0px 30px;">用户</el-menu-item>
      </el-menu>
      <el-dropdown trigger="click" class="user-dropdown">
                <span class="dropdown-trigger" style="cursor: pointer; white-space: nowrap;font-size: 20px;font-weight: bold;">
                    {{user.username}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 主体内容区域 -->
    <div class="content" style="padding: 20px;">
      <!-- 主体内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ElMenu, ElMenuItem, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import {onMounted, ref} from 'vue';
import router from "@/router";

const user = ref(getUser());


// 退出登录功能
const logout = () => {
  if (confirm('您确认要退出登录吗?')) {
    // 退出时要清空用户数据
    localStorage.removeItem('user');
    localStorage.removeItem('jwtToken');
    // 退出后要去到登录页
    window.location.href = '/auth/login';
    // 也需要把已经取出来的 user 对象清空
    user.value = '';
  }
};
const navigatorIndex=()=>{
  router.push("/index")
}
</script>

<style scoped>
.top-nav {
  height: 80px;
  background-color:#efe9dd;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右对齐 */
  padding: 0 20px;
}

.logo {
  /* 添加这一行来设置logo容器的背景颜色，使其与导航栏颜色一致 */
  background-color: #efe9dd;
  display: flex;
  align-items: center;
}

/* 确保图片覆盖容器的背景颜色，仅当图片背景不透明时适用 */
.logo img {
  width: auto; /* 或指定宽度以避免拉伸 */
  height: 60px;
  display: block; /* 防止图片下方出现空隙 */
}

.logo span {
  margin-left: 10px;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
}

.user-dropdown {
  display: flex;
  align-items: center;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: black;
  white-space: nowrap;
  margin-left: 10px;
}

.dropdown-trigger .el-icon-arrow-down {
  margin-left: 5px;
}

.content {
  padding: 20px;
  height: calc(100% - 80px); /* 减去顶部导航栏的高度 */
  overflow-y: auto;
}
</style>
